<template>
    <div class="vipItem " @mouseover="hover" @mouseout="hover">
        <p>{{vipSet.name}}</p>
        <p>{{vipSet.text}}</p>
        <p>¥ {{vipSet.price}}</p>
        <button class=" button-hover" v-if="isHover">立即开通</button>
        <button class="btn" v-else></button>
        <div class="label vip-1" v-if="vipSet.label">{{vipSet.label}}</div>
    
    </div>
</template>

<script>
    export default {
        props:{
            vipSet:Object
        },
        data(){
            return {
                isHover:false,
            }
        },
        methods:{
            hover:function(){
                this.isHover = !this.isHover;
            }
        }
    }
</script>

<style  scoped>
.label{
    position:absolute;
    width: 130px;
    height:40px;
    text-align: center;
    line-height:40px;
    left:-4px;
    top:-4px;
    background-size: 100% 100%;
    font-size: 16px;
    color: #ffffff;
}
.vip-1{
    background-image: url("../../../../src/assets/images/labels/firstVip.png");
}
/* .vip-2{
 background-image: url("../../../assets/images/labels/recommend.png");
} */
.vipItem{
    width: 235px;
    height:245px;
    display: flex;
    flex-direction:column;
    padding-top:40px;
    box-sizing: border-box;
    position: relative;
    align-items: center;
    border:4px solid #e6e6e6;
    background-color:#fff9f5;
    color: #db7c41;
    border-radius:10px;
  
}
.vipItem:hover{
  border:4px solid #ff9a5c 
}
.vipItem p:first-child{
    font-size:22px;
}
.vipItem p:nth-child(2){
    font-size:16px;
}
.vipItem p:nth-child(3){
    font-size:34px;
    color:#ff351a;
    font-weight: 600;
}
.vipItem p{
    margin:5px 0;
}
button{
     width: 200px;
    height:40px;
    margin-top:20px;
    bottom: 20px;
    font-size:22px;
    display:inline-block;
    border-radius:20px;
        border: none;
}
.btn{
    background: url("../../../../src/assets/images/labels/button.png");
    background-size: 100% 100%;

}

.button-hover{
        background:linear-gradient(to right,#ffaa23 0%, #f29005 100%);
      color: #ffffff;
}
</style>